<template>
  <div id="page-club-employee">
    <h2>工作人员列表</h2>

    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="fr" @click="showCreateModal()">新增工作人员</Button>
      </div>

      <div class="employee-list pic-list clearfix" v-if="list && list.length > 0">
        <Card class="pic" v-for="(item, index) in list" :key="index">
          <div>
              <div class="avator-bg avator-bg-md"
                v-if="item.headImage"
                :style="{ backgroundImage: 'url(' + splitImg(item.headImage)[0].url + ')', margin: '0 auto' }">
              </div>
              <div class="avator-bg avator-bg-md"
                v-else>
              </div>
              <Form label-position="left" :label-width="80" class="mt20">
                <FormItem label="姓名:">{{ item.employeeName }}</FormItem>
                <FormItem label="昵称:">{{ item.nickname }}</FormItem>
                <FormItem label="岗位:">{{ item.postion }}</FormItem>
                <FormItem label="介绍:">{{ item.introduce }}</FormItem>
                <FormItem label="服务承诺:" class="mt10">{{ item.servicePromise }}</FormItem>
              </Form>
              <div class="handler">
                <span @click="showUpdateModal(item)"><Icon type="edit"></Icon></span>
              </div>
          </div>
        </Card>
      </div>
      <div v-else class="empty-con">
        <i></i>
        <p>该筛选条件下没有任何内容</p>
      </div>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>

    <update-modal :form="form" @submit="getList"></update-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import clubApi from '@/api/club'
  import updateModal from './components/employee/update-modal'

  export default {
    name: 'page-club-employee',
    components: {
      updateModal
    },
    data () {
      return {
        loading: false,
        query: {
          pkRcInfo: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      splitImg (str) {
        return Vue.filter('splitImg')(str || '')
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await clubApi.employeeList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      showUpdateModal (detail) {
        this.form.data = Object.assign({}, detail)
        this.form.visible = true
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-club-employee {
    .pic {
      width: 300px;
      height: 500px;

      .handler {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: none;
        .ivu-icon {
          margin-right: 10px;
          cursor: pointer
        }
      }

      &:hover .handler {
        display: block
      }
    }

    .ivu-form-item {
      margin-bottom: 0px;
      padding-left: 5px;
      .ivu-form-item-content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
</style>
